<template>
    <div class="user_header" :style="{backgroundImage: `url(${background_image})`}">
<!--            <van-icon name="setting-o" class="user_set" @click="toSetting"/>-->
        <van-icon name="close" class="user_set" @click="logout"/>
        <div class="user_avatar">
            <img :src="avatar" alt="头像" width="55" height="55">
        </div>
        <div>{{nickName}}</div>
        <div style="font-size: 12px;color: #f2f2f2;">{{userId}}</div>
    </div>
</template>

<script>
    import avatar_default from '@/assets/images/avatar_default.png';
    import bg_default from '@/assets/images/user_head_bg.png';
    import {getLocalStorage, removeLocalStorage} from '@/utils/local-storage';
    import {Dialog} from "vant";
    import {authLogout} from "@/api/api";

    export default {
        name: 'user-header',

        props: {
            isLogin: {
                type: Boolean,
                default: false
            }
        },

        data() {
            return {
                nickName: '昵称',
                avatar: avatar_default,
                background_image: bg_default,
                userId: ''
            };
        },

        activated() {
            this.getUserInfo();
        },

        methods: {
            getUserInfo() {
                const infoData = getLocalStorage(
                    'nickName',
                    'avatar',
                    'userId'
                );
                this.avatar = infoData.avatar || avatar_default;
                this.nickName = infoData.nickName || '昵称';
                this.userId = infoData.userId;
            },
            toSetting() {
                this.$router.push({name: 'user-information'});
            },
            logout() {
                Dialog.confirm({
                    title: '系统提示',
                    message: ('是否退出')
                }).then(() => {
                    authLogout().then(res => {
                        removeLocalStorage('Authorization')
                        removeLocalStorage('avatar')
                        removeLocalStorage('nickName')
                        removeLocalStorage('pid')
                        removeLocalStorage('parentId')
                        removeLocalStorage('userId')
                        removeLocalStorage('mobile')
                        this.$router.push({ name: 'home' });
                    })
                }).catch(() => {
                    // 取消方法
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .user_header {
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        color: #fff;
        padding-top: 30px;
        padding-bottom: 10px;
    }

    .user_set {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 24px;
    }

    .user_avatar {
        margin-bottom: 10px;

        img {
            border: 0;
            border-radius: 50%;
        }
    }
</style>
